<template>
  <div class="register">
     <div class="container">
      
        <div class="form">
            <input type="text" placeholder="请输入您的手机号码" class="tel" maxlength="11" onkeyup="value=value.replace(/[^\d]/g,'')" v-model="tel">
            <div class="msgDiv">
                <input type="text" class="msg" placeholder="请输入验证码"  maxlength="6" v-model="msg">
                <button type="button" class="getMsg" @click="getmsg" v-show="sendFlag">{{msgTips}}</button>
                <span type="button" class="getMsg" v-show="!sendFlag">{{authTime}}秒</span>
            </div>
            <input type="password" placeholder="请输入您的密码" class="tel" v-model="password">
            <input type="password" placeholder="请再次输入您的密码" class="tel" v-model="confirmPassword">
            <button type='button' class="loginButton" @click="register">注册</button>
        </div>
        <transition name="fade">
            <div class="AlertBlock" id="AlertBlock" v-show="show"></div>
        </transition>
    </div>
  </div>
</template>

<script>
export default {
  name: "register",
  data() {
    return {
      show: false,
      tel: "",
      password: "",
      msgTips: "获取验证码",
      authTime: 60,
      sendFlag: true,
      msg:"",
      password:"",
      confirmPassword:"",
    };
  },
  methods: {
    getmsg: function() {
      if (this.tel == "") {
        this.showTips("请输入手机号码");
      } else {
         this.sendFlag = false;
            this.authTime = 60;
            var t =  setInterval(()=>{
                this.authTime--;
                if(this.authTime<=0){
                    this.sendFlag = true;
                    clearInterval(t);
                }
            }, 1000);
      }
    },
    register: function() {
      if (this.tel == "") {
        this.showTips("请输入手机号码");
        return false;
      }
      if (this.msg == "") {
        this.showTips("请输入验证码");
        return false;
      }
      if (this.password == "") {
        this.showTips("请输入密码");
        return false;
      }
      if (this.confirmPassword != this.password ) {
        this.showTips("前后密码不一致");
        return false;
      }
    },
    //错误提示效果
    showTips: function(msg) {
      this.show = true;
      document.querySelector("#AlertBlock").innerHTML = msg;
      setTimeout(() => {
        this.show = false;
      }, 1900);
      return false;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@charset "UTF_8";
.form {
  margin-top: 1.7rem;
}

.tel {
  display: block;
  width: 5.5rem;
  padding: 0.3rem;
  font-size: 0.28rem;
  border: none;
  border-bottom: 0.01rem solid #eee;
  margin: 0 auto;
}

.loginButton {
  display: block;
  border-radius: 0.362rem;
  width: 5rem;
  height: 0.724rem;
  border: none;
  background-color: rgba(0, 150, 136, 1);
  font-size: 0.3rem;
  color: #fff;
  margin: 1rem auto 0;
}

.alink {
  display: flex;
  width: 5rem;
  margin: 0.6rem auto 0;
  justify-content: space-between;
}

.msgDiv {
  width: 5.5rem;
  margin: 0.3rem auto 0;
  display: flex;
  justify-content: space-between;
}

.msgDiv .msg {
  width: 3.5rem;
  display: block;
  padding: 0.3rem;
  font-size: 0.28rem;
  border: none;
  border-bottom: 0.01rem solid #eee;
  margin: 0 auto;
}

.msgDiv .getMsg {
  width: 2rem;
  display: block;
  /* height: .8rem; */
  padding: 0.1rem 0;
  border: none;
  border-bottom: 0.01rem solid #eee;
  margin: 0 auto;
  border-radius: 0.1rem;
  font-size: 0.28rem;
  background: rgba(0, 150, 136, 1);
  color: #fff;
  text-align: center;
  line-height: .7rem;
}
</style>
